<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-25 19:41:42
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <el-container>
      <el-header>
        <Head/>
      </el-header>

      <el-main>
          <!-- 导航 -->
            <div class="na">
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#fffeee"
                    text-color="#000"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1">人气口红爆品</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">魅力彩妆</template>
                        <el-submenu index="2-1">
                            <template slot="title">脸部彩妆</template>
                            <el-menu-item index="粉底">粉底</el-menu-item>
                            <el-menu-item index="2-1-2">修容</el-menu-item>
                            <el-menu-item index="2-1-3">高光</el-menu-item>
                            <el-menu-item index="2-1-4">腮红</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="2-2">唇部彩妆</el-menu-item>
                        <el-menu-item index="2-3">眼部彩妆</el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">眉部彩妆</template>
                            <el-menu-item index="2-4-1">眉粉</el-menu-item>
                            <el-menu-item index="2-4-2">眉膏</el-menu-item>
                            <el-menu-item index="2-4-3">眉笔</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3">护肤必选</el-menu-item>
                    <el-menu-item index="4">新品推荐</el-menu-item>
                    <el-menu-item index="5">会员中心</el-menu-item>
                </el-menu>
            </div>


          <div class="detail-title">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top:20px;padding-left:30px;">
                    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>购物车</el-breadcrumb-item>
                </el-breadcrumb>
              </div>

              <div class="car-body">
                  <div class="car-title" >
                    <h3>我的购物车</h3>
                    </div>
                    <div style="margin-top:-40px;margin-bottom:50px">
                        <i class="el-icon-truck"></i>预计1-3个工作日发货
                    </div>
                
                
                <div class="car-table">
                    <el-table
                        ref="multipleTable"
                        :data="carData"
                        @selection-change="handleSelectionChange"
                        stripe
                        style="width: 100%">
                        <el-table-column type="selection" width="55" prop="id"></el-table-column>
                        <el-table-column prop="mainImage" label="商品图片">
                          <template slot-scope="scope">            
                            <img :src="scope.row.mainImage"  height="70" />
                          </template>  
                        </el-table-column>
                        <el-table-column prop="title" label="名称"></el-table-column>
                        <el-table-column prop="nowPrice" label="单价"></el-table-column>
                        <el-table-column label="数量" prop="goodNum">
                          <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.goodNum" @change="updateNum(scope.row.id,scope.row.goodNum)"></el-input-number>
                          </template>
                        </el-table-column>
                        <el-table-column label="小计" prop="allPrice"></el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              type="danger"
                              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                          </template>
                        </el-table-column>
                    </el-table>

                    <br/>

                    <div class="page">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="keyword.currentPage"
                        :page-size="keyword.pageSize"
                        layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>

                    <div style="margin-top: 20px">
                      <el-button @click="toggleSelection()" style="margin-left: -720px">取消选择</el-button>
                      <el-button @click="allDelete()" style="margin-left: -220px">批量删除</el-button>
                    </div>

                    <hr/>
                    <div class="total">
                        <p>商品总数: {{allGoods}}</p>
                        <p>运费: ￥0</p>
                        <h4>应付总金额: ￥{{allMoney}}</h4>
                    </div>
                    <hr/>

                    <div class="allBtn">
                      <button class="btn" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';">继续选购</button>
                      <button class="btn" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" @click="toBuy">去结算</button>
                    </div>

                </div>
              </div>

              <div class="fourth-rail">
          <div class="fourth-title">
              <img src="@/assets/images/w.jpg" alt="">
          </div>
          <div class="fourth-body">
              
          </div>
      </div>
      
      <div class="fifth-rail">
          <div class="fifth-left">
              <div class="fl1">
                  <p><strong>关于我们</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>商户介绍</el-link></li>
                      <li><el-link>联系我们</el-link></li>
                      <li><el-link>正品承诺</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>消费者指南</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>新手指南</el-link></li>
                      <li><el-link>常见问题</el-link></li>
                      <li><el-link>通关税费</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>物流配送</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>配送方式</el-link></li>
                      <li><el-link>运费标准</el-link></li>
                      <li><el-link>物流跟踪</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>售后政策</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>退货政策</el-link></li>
                      <li><el-link>退货流程</el-link></li>
                      <li><el-link>联系客服</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>网站政策</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>服务条款</el-link></li>
                      <li><el-link>隐私条款</el-link></li>
                  </ul>
              </div>
          </div>
          <div class="fifth-right">
              <img src="@/assets/images/er.jpg" alt="">
              <p><strong>关注我们</strong></p>
          </div>
      </div>
      </el-main>

      <el-footer>
        <Foot/>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
import Head from "@/views/layout/Head.vue"
import Foot from "@/views/layout/Foot.vue"
import {getByMemberId,updateCar,removeById,removeByMeId} from "@/api/cart.js"
import ShareData from '@/utils/localStorage.js'

export default {
  components: {
    Head,
    Foot
  },
  data(){
      return{
          carData:[],
          keyword:{
              currentPage:1,
              pageSize:3,
              memberId:"",
          },
          total:0,
          head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
          car:{},
          allGoods:0,
          allMoney:0,
          multipleSelection: [],
      }
  },
  created(){
    this.loadCar();
  },
  methods:{
    handleDelete(index,row){
      // console.log(index,row);
      removeById(row.id).then(res=>{
        if(res.data.code==="0000"){
          this.$message.success(res.data.msg);
          this.loadCar();
        }
      })
    },
    toggleSelection() {
        this.$refs.multipleTable.clearSelection();
        for(let i=0;i<this.carData.length;i++){
          this.car.id=this.carData[i].id;
          this.car.checked=0;
          updateCar(this.car).then(res=>{
            if(res.data.code==="0000"){
              console.log(res.data.msg);
            }
        })
        }

    },
    toBuy(){
      this.$router.push("/buy");
    },
    handleSizeChange(val) {
      this.keyword.pageSize=val;
    },
    handleCurrentChange(val){
      this.keyword.currentPage=val;
      this.loadCar(false);
    },
    loadCar(){
      this.keyword.memberId=ShareData.getItem("memberId");
      getByMemberId(this.keyword).then(res=>{
        if(res.data.code==="0000"){
          this.carData=res.data.data.records;
          for(let i=0;i<this.carData.length;i++){
            this.carData[i].mainImage=this.head+this.carData[i].mainImage;
            this.carData[i].allPrice=this.carData[i].nowPrice*this.carData[i].goodNum;
          }
          this.total=res.data.data.total;
        }
      })
    },
    updateNum(id,num){
      this.car.id=id;
      this.car.goodNum=num;
      // console.log(this.car)
      updateCar(this.car).then(res=>{
        if(res.data.code==="0000"){
          this.loadCar();
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.allGoods=0;
      this.allMoney=0;
      // console.log(this.multipleSelection)
      for(let i=0;i<this.multipleSelection.length;i++){
        this.allGoods+=this.multipleSelection[i].goodNum;
        this.allMoney+=this.multipleSelection[i].allPrice;
        // 修改数据库商品选择状态
        this.car.id=this.multipleSelection[i].id;
        this.car.goodNum=this.multipleSelection[i].goodNum;
        this.car.checked=1;
        console.log(this.car)
        updateCar(this.car).then(res=>{
          if(res.data.code==="0000"){
            console.log(res.data.msg);
          }
        })
      }
      // for(let i=0;i<this.multipleSelection[i].length;i++){
        
      // }
    },
    allDelete(){
      let memberId=ShareData.getItem("memberId");
      removeByMeId(memberId).then(res=>{
        if(res.data.code==="0000"){
          this.loadCar();
        }
      })
    }
  },

}
</script>

<style scoped>
.el-container {
  min-height: 100%;
}
.el-header{
    background-color: #fff;
    color: #333;
    text-align: center;
    /* line-height: 100px; */
  }
  .el-main {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    text-align: center;
    
  }
  .el-main::-webkit-scrollbar{
    display: none;
  }
  .el-footer {
    background-color: rgb(173, 163, 163);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .na{
    margin: 0px 80px 0px;
}
  .detail-title{
      margin:10px 100px 20px;
  }
  .car-body{
      width: 80%;
      /* height: 100vh; */
      margin-left: 7%;
      background-color: rgb(240, 173, 173);
      padding: 3%;
  }
  .car-title{
      /* display: flex;
      align-items: center;
      margin-left: 150px;
      justify-content: space-around; */
      text-align: left;
  }
  .car-table{
      width: 80%;
      margin-left: 10%;
  }
  .total{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .allBtn{
    display: flex;
    justify-content: space-around;
  }
  .btn{
    width: 220px;
    height: 60px;
    background-color:#000;
    color: #fff;
}
.fourth-title{
    margin-top: 30px;
    height: 100px;
}
.fourth-title img{
    width: 100%;
    margin-top: 50px;
}
.fifth-rail{
    width: 100%;
    height: 260px;
    background-color: rgb(248, 187, 117);
}
.fifth-left{
    width: 50%;
    height: 260px;
    /* background-color: #fff; */
    margin: 0px 20px 0px;
    display: flex;
}
.fl1{
    width: 100px;
    height: 130px;
    /* background-color: rgb(156, 35, 35); */
    margin-left: 50px;
    padding-top: 30px;
}
.fifth-right{
    width: 400px;
    height: 260px;
    /* background-color: #fff; */
    position: absolute;
    margin-top: -230px;
    margin-left: 900px;
}
</style>